<template>
	<view>
		<!-- #ifndef APP-PLUS -->
			<uni-nav-bar :shadow="false" :border="false"
			@click-left="clickLeft" @click-right="clickRight">
				<!-- 左边图标 -->
				<block slot="left">
					<view class="iconfont icon-qiandao ml-2 mr-2" style="font-size: 22px;color: #FF4A6A;"></view>
				</block>
				<!-- 中间搜索框 -->
				<view class="flex justify-center align-center rounded text-muted bg-light flex-1 mt-1" style="margin-left: -46upx;height: 60upx;" @tap="openSearch">
					<view class="iconfont icon-sousuo mr-1"></view>搜索帖子
				</view>
				<!-- 右边图标 -->
				<block slot="right">
					<view class="icon iconfont icon-bianji1 text-dark" style="font-size: 22px;"></view>
				</block>
			</uni-nav-bar>
		<!-- #endif -->
		<!-- tabbar导航栏 -->
		<scroll-view scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollinto" scroll-with-animation
			class="scroll-row" style="height: 100rpx;">
			<view v-for="(item,index) in tabList" :key="index" :id="'tab'+index"
				class="scroll-row-item px-4 py-2 font-weight-bold"
				:class="tabIndex === index ? 'font-lg text-main font-weight-bold' : ''" @click="changeTab(index)">
				{{item.classname}}
			</view>
		</scroll-view>
		<!-- 列表滑动 -->
		<swiper :duration="500" :current="tabIndex" @change="onChangetab" :style="'height:'+scrollH+'px'">
			<swiper-item v-for="(item,index) in newList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="loadMore(index)">
					<!-- 列表有数据 -->
					<template v-if="item.list.length > 0">
						<!-- 列表组件 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<commonList :item="item2" :index="index2" @follow='follow' @dosupport="dosupport">
							</commonList>
							<divider></divider>
						</block>
						<!-- 上拉加载更多 -->
						<loadMore :loadMore="item.loadMore"></loadMore>
					</template>
					<template v-else-if="!item.fristLoad">
						<view class="flex justify-center align-center py-5 text-muted">加载中...</view>
					</template>
					<template v-else>
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/loadmore.vue'
	export default {
		components: {
			commonList,
			loadMore,
			uniNavBar
		},
		data() {
			return {
				//列表高度
				// scrollH: 600,
				//默认选择导航第一项
				tabIndex: 0,
				//导航自动定位选中项到第一位
				scrollinto: '',
				tabList: [],
				newList: []
			}
		},
		//监听原生搜索框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=post',
			});
		},
		//监听原生搜索栏按钮事件
		onNavigationBarButtonTap() {
			console.log(1)
			this.navigateTo({
				url: '../add-input/add-input'
			})
		},
		onLoad() {
			// uni.getSystemInfo({
			// 	success(res) {
			// 		this.scrollH = res.windowHeight - uni.upx2px(120)
			// 	}
			// })
			//监听点赞评论
			uni.$on('updateFolloworSurpport', (e) => {
				console.log(e)
				switch (e.type) {
					case 'follow':
						this.follow(e.user_id)
						break;
					case 'support':
						this.dosupport(e.data)
						break;
					default:
						break;
				}
			})
			//监听发布文章
			uni.$on('updateList', (e) => {
				this.getData()
			})
			// 监听评论数
			uni.$on('updatecommoncount', (e) => {
				this.newList.forEach(tab => {
					tab.list.forEach(v => {
						if (v.id === e.id) {
							v.comment_count = e.count
						}
					})
				})
			})

			this.getData()
		},
		onUnload() {
			uni.$off('updateFolloworSurpport', (e) => {})
			uni.$off('updateList', (e) => {})
			uni.$off('updatecommoncount', (e) => {})
		},
		computed: {
			scrollH() {
				let res = uni.getSystemInfoSync()
				return res.windowHeight
			}
		},
		methods: {
			// #ifndef APP-PLUS
				clickLeft(){},
				clickRight(){
					this.navigateTo({
						url: '../add-input/add-input'
					})
				},
				openSearch(){
					uni.navigateTo({
						url: '../search/search?type=post'
					});
				},
			// #endif
			//导航栏与列表同步
			onChangetab(e) {
				this.changeTab(e.detail.current)

			},
			//导航栏选中事件
			changeTab(index) {
				if (this.tabIndex === index) {
					return
				}
				this.tabIndex = index
				this.scrollinto = 'tab' + index
				if (!this.newList[index].fristLoad) {
					this.getList()
				}
			},
			//获取数据
			getData() {
				this.$H.get('/postclass').then(res => {
					this.tabList = res.list
					var arr = []
					//模拟获取数据
					for (let i = 0; i < this.tabList.length; i++) {
						arr.push({
							loadMore: '上拉加载更多',
							list: [],
							page: 1,
							fristLoad: false
						})
					}
					this.newList = arr
					if (this.tabList.length) {
						this.getList()
					}
				})
			},
			//获取公共列表
			getList() {
				let index = this.tabIndex
				let id = this.tabList[index].id
				let page = this.newList[index].page
				let isrefresh = page === 1
				this.$H.get('/postclass/' + id + '/post/' + page, {}, {
					token: true,
					nocheck: true
				}).then(res => {
					let list = res.list.map(v => {
						return this.$U.formatCommonList(v)
					})
					if (isrefresh) {
						this.newList[index].fristLoad = true
					}
					this.newList[index].list = isrefresh ? list : [...this.newList[index].list, ...list],
						this.newList[index].loadMore = list.length < 10 ? '没有更多了' : '上拉加载更多'
				})
			},
			//关注
			follow(e) {
				console.log(1)
				this.newList.forEach(tab => {
					tab.list.forEach(v => {
						if (v.user_id === e) {
							v.isFollow = true
						}
					})
				})
				uni.showToast({
					title: '关注成功'
				});
			},
			//点赞取消点赞操作
			dosupport(e) {
				this.newList[this.tabIndex].list.forEach(item => {
					if (item.id === e.id) {
						if (item.support.type === '') {
							item.support.type = e.type
							item.support[e.type + '_count']++
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							item.support.support_count--
							item.support.unsupport_count++
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							item.support.support_count++
							item.support.unsupport_count--
						}
						item.support.type = e.type
					}
				})
				uni.showToast({
					title: e.type === 'support' ? '喜欢' : "不喜欢"
				});
			},
			//scrollview 属性 scrolltolower触底事件 上拉加载更多
			loadMore(index) {
				const item = this.newList[index]
				if (item.loadMore !== '上拉加载更多') return;
				item.loadMore = '加载中..'
				//模拟加载数据
				item.page++
				console.log(item.page)
				this.getList()

			}
		}
	}
</script>

<style>
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>
